<template>
	<view class="hot-main">
		<view class="goods" :class="cleaType=='assort'?'assortGoods':'exchangegoods'" v-for="(item,index) in goodsList" :key="index" @tap="clickProduct(index,item)">
			<image :src="item.pic_url" mode=""></image>
			<view class="goods-text">{{item.name}}</view>
			<view class="goods-coins">{{item.integral}}回收币</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/component/commen/api/request.js"
	export default{
		props:{
			goodsList:Array,
			cleaType:String
		},
		data(){
			return{
				
			}
		},
		watch:{
			goodsList(data){
				this.goodsList = data
				console.log("子组件中的值：",data)
			}
		},
		mounted(){
			// console.log(this.goodsList)
			console.log(this.cleaType)
		},
		methods:{
			clickProduct(index,res){
				// console.log(index)
				// console.log(res)
				uni.navigateTo({
					url:`/otherPages/ProductDetails/ProductDetails?goodsId=${res.id}`
				})
				// https://huishou.68699.cn/app/index.php?i=2&t=0&v=2.7.4&from=wxapp&c=entry&a=wxapp&do=goods&op=detail&m=wjyk_recycle&sign=b9a35356de250da6bdd9d3f3794e1e48&goodsid=11
			}
		}
	}
</script>

<style lang="scss">
	.hot-main{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		// border: 1px solid #000;
		justify-content: space-between;
		// margin-bottom: 160rpx;//底部tabbar高度：120rpx
		.assortGoods{
			width: 44%;
			// border: 1px solid #000;
			margin: 0 15rpx;
			box-shadow: 6rpx 6rpx 10rpx #ccc;
			border-radius: 6rpx;
		}
		.exchangegoods{
			width: 31%;
			border-radius: 10rpx;
		}
		.goods{
			// width: 31%;
			background: #fff;
			margin-top: 20rpx;
			// border: 1px solid #f00;
			image{
				width: 100%;
				height: 210rpx;
				border-radius: 10rpx 10rpx 0 0;
			}
			.goods-text{
				margin:10rpx 10rpx 0 10rpx;
				font-size: 29rpx;
			}
			.goods-coins{
				margin: 10rpx 0 10rpx 10rpx;
				font-size: 26rpx;
				// border: 1px solid #000;
				// transform: scale(0.8);
				width:100%;
				color: #00b388;
			}
		}
	}
</style>